import CodeView from '../../../shared/components/CodeView';
import DisplayColumn from '../../../shared/components/DisplayColumn';
import DisplayGrid from '../../../shared/components/DisplayGrid';
import Blockquote from '../../../shared/components/Blockquote';
import { getDisplayElementById } from '../../shared/helpers';
import * as Base from './base/example';
import * as AdvancedModal from './advanced-modal/example';
import * as MultiEntity from './multi-entity/example';

<div className="doc lead">
  Lookup is an autocomplete combobox that will search against a database object.
</div>

<CodeView demoStyles="height: 15rem;" exampleOnly>
  {getDisplayElementById(Base.states, 'displaying-options-based-on-input')}
</CodeView>

## About Lookups

**Note** — A lookup is a combobox component, please find implementation documentation under the [combobox component](/components/combobox/#Base-Combobox).

The lookup can parse through single or multi scoped datasets. The parsed dataset can be filtered by single or multi option selects.

You can find the lookup component throughout most data fields that allow inline inputs. Most commonly used on **record home** and **object home**.

### Accessibility

Lookups allow the user to have dual keyboard focus: while focus in the input search field, the user can type text into the field and simultaneously use arrow keys to navigate up and down the results list. Use the appropriate **ARIA** attributes in your markup in order to effectively communicate the relationship between the input field and the results list to users of assistive technology.

**Expected markup:**

- A Combobox must come with an associated `label` element, with an appropriate `for` attribute
- `slds-combobox` acts as the root node to the composite Combobox widget. It takes the `role="combobox"` attribute as a result
  - `aria-haspopup="listbox"` attribute is then applied to indicate the Combobox will display a popup, of type `listbox`
  - `aria-expanded="true|false"` attribute is applied to describe whether the popup of `listbox` is currently visible or not
- `aria-activedescendant` must be set to the currently selected option within the list
- `role="listbox"` must be added to the list of results, each result should have `role="option"`

**Expected keyboard interactions:**

- `Up` and `Down` arrow keys to cycle through the available options in the list, also updates `aria-activedescendant` on the input
- `Enter` selects the current option and collapses the list
- `Escape` collapses the list
- Character keys jumps to the first option with those characters

## Base

<CodeView demoStyles="height: 13rem;">
  {getDisplayElementById(Base.default)}
</CodeView>

## States

### Focused

<CodeView demoStyles="height: 13rem;">
  {getDisplayElementById(Base.states, 'focused')}
</CodeView>

### Open - Item Focused
<CodeView demoStyles="height: 13rem;">
  {getDisplayElementById(Base.states, 'open-item-focused')}
</CodeView>

### Displaying options based on user input
<CodeView demoStyles="height: 14rem;">
  {getDisplayElementById(Base.states, 'displaying-options-based-on-input')}
</CodeView>

### Option Selected
<CodeView>
  {getDisplayElementById(Base.states, 'closed-option-selected')}
</CodeView>

## Grouped

<CodeView isViewport>
  {getDisplayElementById(AdvancedModal.default)}
</CodeView>

## Multi Entity

<CodeView demoStyles="height: 17rem;">
  {getDisplayElementById(MultiEntity.default)}
</CodeView>

## States

### Focused
<CodeView demoStyles="height: 15rem;">
  {getDisplayElementById(MultiEntity.states, 'focused')}
</CodeView>

### Open - Item Focused
<CodeView demoStyles="height: 15rem;">
  {getDisplayElementById(MultiEntity.states, 'open-item-focused')}
</CodeView>

### Option(s) Selected
<CodeView>
  {getDisplayElementById(MultiEntity.states, 'options-selected')}
</CodeView>

### Focused - Option(s) Selected
<CodeView demoStyles="height: 15rem;">
  {getDisplayElementById(MultiEntity.states, 'focused-options-selected')}
</CodeView>
